<script>
import libs from "./libs";
import UIState from "./mixin/UIState";

let components = {};
Object.keys(libs).forEach((key) => {
  components[key] = libs[key];
});

export default {
  mixins: [UIState],
  components: components,

  props: {
    conf: {
      type: Array,
      default: () => {},
    },
  },
  methods: {
    mouseenterHandler(event, c) {
      console.log("mouseenter", c.tag);
    },
    uiWrap(c) {
      let that = this;
      return {
        class: {
          wrapper: true,
          active: c == this.selectedUI,
          over: c == this.enterUI,
        },
        attrs: {
          tittle: this.selectedUI && this.selectedUI.tag,
        },
        on: {
          click(event) {
            // console.log(c.tag, event.currentTarget.className);
            that.$store.dispatch("compiler/setSelectedUI", c);
            event.stopPropagation();
          },
          mouseenter(event) {
            that.$store.dispatch("compiler/setEnterUI", c);
            that.mouseenterHandler.call(that, event, c);
          },
        },
      };
    },
    removeIconHandle(c, data) {
      return () => {
        // console.log(c);
        data.splice(data.indexOf(c), 1);
      };
    },
  },
  render(h) {
    const that = this;
    const renderTag = (h, c) => {
      let { data = {}, tag, slot, children } = c;
      let props = data.props || {};
      return h(
        tag,
        {
          props: {
            children,
            ...props,
            data,
          },
          attrs: {
            ...that.$attrs,
          },
        },
        slot &&
          slot.map((s) => {
            return s.content;
          })
      );
    };

    return h(
      "div",
      this.conf.map((c) => {
        return h("div", this.uiWrap.call(this, c), [
          <i
            class="el-icon-delete remove-icon"
            onclick={this.removeIconHandle(c, this.conf)}
          ></i>,
          renderTag(h, c),
        ]);
      })
    );
  },
};
</script>

<style lang="scss">
.wrapper {
  border: 1px dotted #345;
  padding: 4px;
  display: inline-block;
  cursor: pointer;
  pointer-events: all;
}
.active {
  border: 2px solid #f00;
}
.over {
  position: relative;
  background-color: antiquewhite;
}
.remove-icon {
  display: none;
  z-index: 10;
  position: absolute;
  top: -17px;
  right: 2px;
  color: #f00;
  background-color: antiquewhite;
}
.wrapper.over:hover .remove-icon {
  display: block;
}
</style>